<template>
<el-container>
    <el-aside width="200px">
    <PersonalMenu></PersonalMenu>
    </el-aside>


    <div class="create">
        <el-form ref="company" :model="company" label-width="80px" :rules="rules">
            <el-form-item label="公司名称" class="create-input" prop="name">
                <el-input placeholder="请输入公司名称"  v-model="company.name" clearable></el-input>
            </el-form-item>
            <el-form-item label="公司官网" class="create-input" prop="website">
                <el-input placeholder="请输入公司官网"  v-model="company.website" clearable></el-input>
            </el-form-item>
            <el-form-item label="公司简介" class="introduction-input" prop="introduction">
                <el-input type="textarea" :rows="5" placeholder="请简单介绍一下你的公司" v-model="company.introduction"  maxlength="200" show-word-limit clearable></el-input>0.0.
            </el-form-item>
            <el-form-item label="公司类型" class="type-input" prop="companyType">
                <el-select v-model="company.companyTypeId" clearable placeholder="请选择">
                    <el-option v-for="companyType in companyTypes" :key="companyType.id" :label="companyType.name" :value="companyType.id"></el-option>
                </el-select>    
            </el-form-item>

            <el-form-item label="公司logo" class="logo-input" prop="logo">
                <el-upload class="avatar-uploader" list-type="picture" :action="action" @change="handlePreview" :before-upload="beforeAvatarUpload">
                    <img v-if="imageUrl" :src="imageUrl" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    <template #tip>
                    <div class="el-upload__tip">
                        请上传.jpg .jpeg .png .bmp .webp .bif格式
                    </div>
                    </template>
                </el-upload>
            </el-form-item>

            <el-form-item label="公司邮箱" class="create-input" prop="email">
                <el-input placeholder="请输入公司联系邮箱"  v-model="company.email"  clearable></el-input>
            </el-form-item>
            
            <el-form-item>
                <el-button type="primary" @click="create" class="btnCreate">创建企业</el-button>
                <el-button @click="cancel" class="btnCancel">取消创建</el-button>
            </el-form-item>
        </el-form>
    </div>
    </el-container>
</template>
<script>
import PersonalMenu from '@/components/menu/PersonalMenu.vue'
import Index from '@/components/Index.vue'
import instance from '@/utlis/request.js';
import instanceToken from '@/utlis/tokenIdentify.js';

export default {
    name:'CreateCompanyView',
    components: {
        PersonalMenu,
        Index
    },
    data() {
        return {
            imgUrl:'',
            company:{
                name:'',
                website:'',
                introduction:'',
                companyType:{
                    id:'',
                    name:'',
                },
                
                companyTypeId:'',          
                email:'',
            },
            logo:'',
            companyTypes:[],
            rules:{
                name:[
                    {required:true,message: '公司名称不能为空', trigger:'blur'}
                ],
                website:[
                    {required:true,message: '公司官网不能为空',trigger:'blur'}
                ],
                introduction:[
                    {required:true,message: '公司简介不能为空',trigger:'blur'}
                ],
                companyType:[
                    {required:true,message:'请选择公司类型',trigger:'blur'}
                ],
                email:[           
                    { required: true, message: '请输入邮箱地址', trigger: 'blur' },
                    { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
                ],
            }
        };
    },
    created() {
        this.initData();
    },
    methods: {
        initData(){
            //进入界面： 获得公司类型
            instance.get("company-type/personal/acceptCompanyType",{params:{
                companyTypeId:this.companyTypeId
            }}).then(res => { 
                this.companyTypes = res.data.data.companyTypes;
            })
        },
        cancel(){
            this.$router.push({name:'PersonalIndexView'});
        },
        //文件预览
        handlePreview(file){
            this.file = file;
            this.imageUrl = file.url;
        },
        handleAvatarSuccess(res, file) {
            this.imageUrl = URL.createObjectURL(file.raw);
        },
        beforeAvatarUpload(file) {
           
            const isJPG = file.type === 'image/jpeg';
            const isJPEG = file.type === 'image/jpeg';
            const  isWebp = file.type === 'image/webp';
            const  isPNG = file.type === 'image/png';
            const isLt2M = file.size / 1024 / 1024 < 2;
            if (!isJPG && !isWebp && !isJPEG && !isPNG) {
                this.$message.error('上传头像图片只能是 JPG,JPEG,Webp,PNG 格式!');
            }
            if (!isLt2M) {
                this.$message.error('上传头像图片大小不能超过 2MB!');
            }
            return isJPG && isWebp && isLt2M;
        },
        create(){
            //点击事件： 创建公司
            var loginUser = window.sessionStorage.getItem("loginUser");
            var userinfo = JSON.parse(loginUser);
            this.company.userinfoId = userinfo.id;
            // var file=this.$refs.pic.files[0];
            
            var formData = new FormData();
            formData.append("file",this.file.raw);
            console.log(file);
        
            formData.append("name",this.company.name);
            formData.append("website",this.company.website);
            formData.append("introduction",this.company.introduction);
            formData.append("companyTypeId",this.company.companyTypeId);
            formData.append("email",this.company.email);
            formData.append("userinfoId",this.company.userinfoId);
            instanceToken.post("/company/personal/CreateCompany",formData,
            {headers:{'content-type':'multipart/form-data'}}).then(res =>{
                if(res.data.success){
                     this.$router.push({name:"CompanyIndexView"});
                }
            })
        },
        loadFile: function(){
           this.picSrc='';
           //this.picFile=event.target.files[0];     
           this.picFile=this.$refs.pic.files[0];
           
           //检查类型
           var fileName = this.picFile.name;
           var dotIndex = fileName.lastIndexOf(".");
           //没有扩展名
           if(dotIndex==-1){
               this.$refs.pic.focus();
               return;
           }
           //取出扩展名
           var ext = fileName.substring(dotIndex+1);
           if(",jpg,jpeg,png,bif,webp,".indexOf(","+ext.toLowerCase()+",")==-1){
               this.$refs.pic.select();
               return;
           } 
           //图片预览
           var reader = new FileReader();
           reader.readAsDataURL(this.picFile);
            var that = this;
           reader.onload=function(e){
               that.picSrc=this.result;
           }
           //reader.onload=()=>this.picSrc=reader.result;
           
           //检查大小
           var fileSize = this.picFile.size;
           console.log(fileSize);
           if(fileSize>1024*100){
               this.$refs.pic.select();
               return;
           }
       },
    },
            
}
</script>
<style scoped>
.create{
    width: 100% ;
}
.create-input{
    width: 820px;
    margin: 0 auto;
    margin-top: 20px;
    margin-left: 250px;
    margin-right: 50px;
    margin-bottom: 20px;
}
.introduction-input{
    width:820px;
    margin-left: 250px;
    
}
.type-input{
    margin-left: 250px;
}
.logo-input{
    margin-top: 10px;
    margin-left: 250px;
    
}
.btnCreate{
    margin-left: 350px;
    margin-top: 30px;
    margin-right: 40px;
}
.btnCancel{
    margin-left: 30px;
    margin-top: 30px;
}
.avatar-uploader{
    width: 178px;
    box-shadow: 0 2px 4px rgba(236, 11, 11, 0.12);
}
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>